<script setup lang="ts">
import {ref} from "vue"
import ChatInputNext from './components/chat-input-next.vue'

const chatInputNext=ref()
// 上传文件
const handleFileChange = (e:Event)=>{
  const target=e.target as HTMLInputElement
  if(target.files&&target.files.length>0){
    const file=target.files[0]
    chatInputNext.value&&chatInputNext.value.insertFile(file)
  }
}
// 处理报错信息
const handleError=(msg:string)=>{
  console.log(msg)
}
// 得到导出的数据
const handleDataExport=()=>{
  const data=chatInputNext.value&&chatInputNext.value.exportData()
  console.log(data)
}

// @列表
const atPopoverList = ref([{
    name: 'codesigner',
    avatar:new URL("@/assets/word.jpg", import.meta.url).href,
},
{
    name: 'react',
    avatar: new URL("@/assets/excel.jpg", import.meta.url).href,
},
{
    name: 'vue',
    avatar: new URL("@/assets/video.png", import.meta.url).href,
},
{
    name: 'webgl',
    avatar: new URL("@/assets/pdf.jpg", import.meta.url).href,
},
{
    name: 'gis',
    avatar: new URL("@/assets/txt.jpg", import.meta.url).href,
},{
    name:'cesium',
    avatar: new URL("@/assets/zip.jpg", import.meta.url).href,
},{
    name:'three',
    avatar:new URL("@/assets/word.jpg", import.meta.url).href,
},{
    name:'cannon-es',
    avatar: new URL("@/assets/excel.jpg", import.meta.url).href,
}]);
</script>

<template>
  <div class="chat-input-next-container">
    输入框组件:
    <div class="op-line">
      <input type="file"  @change="handleFileChange">
      <button @click="handleDataExport">导出数据</button>
    </div>
    <ChatInputNext :cusStyle="{width:'80vw',height:'50vh',border:'1px solid #d3d3d3',maxHeight:'50vh'}" ref="chatInputNext" @error="handleError" :atUserList="atPopoverList"></ChatInputNext>
  </div>
</template>
<style scoped>
.chat-input-next-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:10px;
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
}
.op-line{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap:10px;
  width:80vw
}
</style>
